<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button type="button">获取数据</button>
<hr>
 <div  id="main" style="width: 100%;height: 500px"></div>

</body>
</html>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-3.1.0.min.js"></script>
<script>


    $(()=>{
        $("button").click(()=>{
            $.ajax({
                type:"get",
                url:"../count/getInfo",
                dataType:"json",
                success:function(datas){
                    console.log(datas);
                    //创建要显示的数据
                    let  classNums = [];
                    let  tolNums=[];
                    let mNums=[];
                    let fNums=[];

                    $.each(datas,function(i,countBean){
                        classNums.push(countBean.className);
                        tolNums.push(countBean.tolNum);
                        mNums.push(countBean.mNuml);
                        fNums.push(countBean.fNuml);
                    });




                    //------------------------------------------------------------
                    var app = {};

                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    var posList = [
                        'left', 'right', 'top', 'bottom',
                        'inside',
                        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                    ];

                    app.configParameters = {
                        rotate: {
                            min: -90,
                            max: 90
                        },
                        align: {
                            options: {
                                left: 'left',
                                center: 'center',
                                right: 'right'
                            }
                        },
                        verticalAlign: {
                            options: {
                                top: 'top',
                                middle: 'middle',
                                bottom: 'bottom'
                            }
                        },
                        position: {
                            options: posList.reduce(function (map, pos) {
                                map[pos] = pos;
                                return map;
                            }, {})
                        },
                        distance: {
                            min: 0,
                            max: 100
                        }
                    };


                    app.config = {
                        rotate: 90,
                        align: 'left',
                        verticalAlign: 'middle',
                        position: 'insideBottom',
                        distance: 15,
                        onChange: function () {
                            var labelOption = {
                                normal: {
                                    rotate: app.config.rotate,
                                    align: app.config.align,
                                    verticalAlign: app.config.verticalAlign,
                                    position: app.config.position,
                                    distance: app.config.distance
                                }
                            };
                            myChart.setOption({
                                series: [{
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }]
                            });
                        }
                    };


                    var labelOption = {
                        show: true,
                        position: app.config.position,
                        distance: app.config.distance,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        rotate: app.config.rotate,
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rich: {
                            name: {
                            }
                        }
                    };

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['总人数',"男生人数","女生人数"]
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {show: false},
                                //显示班级的信息
                                data: classNums
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        //显示的数据
                        series: [
                            {
                                name: '总人数',
                                type: 'bar',
                                barGap: 0,
                                label: labelOption,
                                emphasis: {
                                    focus: 'series'
                                },
                                //显示总人数
                                data: tolNums
                            },
                            {
                                name: '男生人数',
                                type: 'bar',
                                label: labelOption,
                                emphasis: {
                                    focus: 'series'
                                },
                                //显示男生人数
                                data: mNums
                            },
                            {
                                name: '女生人数',
                                type: 'bar',
                                label: labelOption,
                                emphasis: {
                                    focus: 'series'
                                },
                                //女生人数
                                data: fNums
                            }
                        ]
                    };

                    option && myChart.setOption(option);


                }
            });


        });

    });


</script>